<!doctype>

<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="apple-touch-fullscreen" content="YES"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link type="text/css" href="css/style.css" rel="stylesheet"/>
    <style>
        #info {
            width: 100%;
            height:100%;
            /*background-color: #666666;*/
            background-color: rgba(0,0,0,0.1);
        }
        #info div{
            width: 300px;
            height: 50px;
            position: relative;
        }
        #sp{
            font-size: 30px;
            margin-top: 300px;
            margin-left:550px;
            position: absolute;
        }
        #btn{
            width: 150px;
            height: 50px;
            margin-top: 400px;
            margin-left:730px;
            position: absolute;
            border-radius: 10px;
        }
        #btn:hover{
            background-color: yellowgreen;
           cursor: pointer;
        }
        #btn a{
            text-decoration: none;
            color: red;
            font-size: 20px;
        }


    </style>

</head>
<body>
<div id = "info">
   <span id = "sp">点击进入后，请按F12，选择模拟手机适配</span>
    <button id= "btn"><a href="#">点击进入</a></button>
</div>
<div id="warp">
    <ul id="outer">
        <!--第一页-->
        <li class="cover">
            <img id="cover-img" src="imgs/450.jpg">
            <div>
                <p id="cover-title">WEB前端开发</p>
                <p id="cover-subtitle">孙中帅的个人简历</p>
            </div>
        </li>
        <!--第二页-->
        <li id="aboutme" class="page">
            <div id="aboutme-title" class="page-title">
                <h2 id="aboutme-title-cn" class="CN">关于我</h2>
                <h2 id="aboutme-title-en" class="EN">About Me</h2>
            </div>
            <div id="aboutme-detail" class="page-detail">
                <p class="page-detail-head">
                    <span>孙中帅</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;男&nbsp;&nbsp;|&nbsp; 27 </span>
                </p>
                <table>
                    <tbody>
                    <tr>
                        <td><span>毕业院校</span></td>
                        <td>山东劳动职业技术学院 | 大专</td>
                    </tr>
                    <tr>
                        <td><span>工作经验</span></td>
                        <td>3年 | 北京壹果企化丨山东魏桥创业</td>
                    </tr>
                    <tr>
                        <td><span>现&nbsp;居&nbsp;地</span></td>
                        <td>北京市昌平区</td>
                    </tr>
                    <tr>
                        <td><span>期望职位</span></td>
                        <td>Web前端开发工程师丨H5开发工程师</td>
                    </tr>
                 
                    <tr>
                        <td><span>工作期望</span></td>
                        <td>希望与大神一起工作，一起探索技术前沿</td>
                    </tr>
                    <tr>
                        <td><span>电子邮箱</span></td>
                        <td>sun_zhong_shuai@163.com</td>
                    </tr>
                    <tr>
                        <td><span>联系电话</span></td>
                        <td>130-7118-7477</td>
                    </tr>
                    <tr>
                        <td><span>简历网址</span></td>
                        <td><a href="http://sunzhongshuai.oschina.io/personal-">http://sunzhongshuai.oschina.io/personal-</a></td>
                    </tr>
                    <tr>
                        <td><span>weixinhao</span></td>
                        <td>sunzhongshuai</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </li>
        <!--第三页-->
        <li id="ability-2" class="page">
            <div id="ability-title-2" class="page-title">
                <h2 id="ability-title-cn-2" class="CN">专业技能</h2>
                <h2 id="ability-title-en-2" class="EN">Ability</h2>
            </div>
            <div id="ability-detail-2" class="page-detail">
                <div class="project">
                        <div class="">
                            <p>扎实的HTML、CSS、JavaScript等前端开发技术基础，能够书写语义合理、结构清晰、易于维护的页面结构。</p>
                            <p>熟练使用HTML5、CSS3及Bootstrap框架，掌握响应式布局和弹性盒布局，可以实现多平台的响应</p>
                            <p>熟练使用Ajax/Json/Jsonp，解决 AJAX 跨域问题和使用artTemplate模板引擎渲染页面。</p>
                            <p>熟练使用JQuery、Zepto、Angularjs等主流MVC框架思想的基本用法。</p>
                            <p>会使用码云、Git 源代码管理工具和 Webpack、Gulp 前端自动化构建工具以及包依赖管理工具。</p>
                            <p>会使用Ionic框架和Cordova开发HybridApp。</p>
                            <p>了解Less/Sass对CSS代码进行预处理，增强CSS代码的可维护性。</p>
                            <p>了解Nodejs、npm 及基本使用。</p>
                       </div>
                </div>
            </div>

        </li>
        <!--第四页-->
        <li id="ability" class="page">
            <div id="ability-title" class="page-title">
                <h2 id="ability-title-cn" class="CN">专业技能</h2>
                <h2 id="ability-title-en" class="EN">Ability</h2>
            </div>
            <div id="ability-detail" class="page-detail">
                <table>
                    <tr>
                        <td id="canvas-td">HTML/CSS/JavaScript</td>
                        <td>
                            <canvas id="canvas-php" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                    <tr>
                        <td>HTML5/CSS3/JQuery</td>
                        <td>
                            <canvas id="canvas-ds" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>

                    <tr>
                        <td> Ajax/Json/Jsonp </td>
                        <td>
                            <canvas id="canvas-html" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                    <tr>
                        <td>Bootstrap</td>
                        <td>
                            <canvas id="canvas-js" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                    <tr>
                        <td>Angularjs </td>
                        <td>
                            <canvas id="canvas-mvc" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                    <tr>
                        <td>Ionic </td>
                        <td>
                            <canvas id="canvas-linux" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                    <tr>
                        <td>Node</td>
                        <td>
                            <canvas id="canvas-mysql" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                    <tr>
                        <td>码云、Git</td>
                        <td>
                            <canvas id="canvas-cpp" class="canvas-ability" height="50"></canvas>
                        </td>
                    </tr>
                </table>
            </div>
        </li>
        <!--第五页    -->
        <li id="experience" class="page">
            <div id="experience-title" class="page-title">
                <h2 id="experience-title-cn" class="CN">项目经验</h2>
                <h2 id="experience-title-en" class="EN">Experience</h2>
            </div>
            <div id="experience-detail" class="page-detail">
                <div class="project">
                    <div class="main">
                        <div clas="left"><p>壹果商城（微信公众号）</p></div>
                        <div class="right"><p>2016.04-2016.08</p></div>
                        <div class="content">
                            <p>项目描述：主要经营母婴系列有机服装及纺织品。</p>
                            <p>主要负责：</p>
                            <p>页面使用CSS+DIV技术布局。</p>
                            <p>使用Swiper框架实现轮播图效果。</p>
                            <p>登录注册页面微信号绑定与后台数据交互。</p>
                            <p>通过Ajax和后台交互购物信息。</p>
                            <p>以及后期的维护和迭代更新。</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <!--第六页-->
        <li id="experience6" class="page">
            <div id="experience-title-6" class="page-title">
                <h2 id="experience-title-cn-6" class="CN">项目经验</h2>
                <h2 id="experience-title-en-6" class="EN">Experience</h2>
            </div>
            <div id="experience-detail-6" class="page-detail">
                <div class="project">
                    <div class="main">
                        <div clas="left"><p>向尚商城（HybridApp）</p></div>
                        <div class="right"><p>2015.12-2016.03</p></div>
                        <div class="content">
                            <p>项目描述：服装及纺织品。</p>
                            <p>主要负责：</p>
                            <p>配置开发环境：Java环境、C++环境、AndroidADT、Node、npm等。</p>
                            <p>使用Swiper插件、JQuery实现轮播图。</p>
                            <p>使用no-repeat实现后台数据绑定交互。</p>
                            <p>利用ionic-image-lazy-load插件实现图片懒加载。</p>
                            <p>使用Cordova打包。</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>

        <!--第七页-->
        <li id="experience7" class="page">
            <div id="experience-title-7" class="page-title">
                <h2 id="experience-title-cn-7" class="CN">项目经验</h2>
                <h2 id="experience-title-en-7" class="EN">Experience</h2>
            </div>
            <div id="experience-detail-7" class="page-detail">
                <div class="project">
                    <div class="main">
                        <div clas="left"><p>嘉嘉家纺微站</p></div>
                        <div class="right"><p>2015.11-2015.12</p></div>
                        <div class = "content">
                            <p>项目描述：整体运用CSS+DIV技术和Bootstrap框架实现整体页面的布局。</p>
                            <p>主要负责：</p>
                            <p>轮播图部分使用Bootstrap组件实现。</p>
                            <p>使用模板引擎，动态的把图片数据放到对应位置。</p>
                            <p>主要内容部分使用删格系统实现响应式。</p>
                            <p>分享部分，分享成功后给分享人加积分。</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <!--第八页-->
        <li id="experience8" class="page">
            <div id="experience-title-8" class="page-title">
                <h2 id="experience-title-cn-8" class="CN">项目经验</h2>
                <h2 id="experience-title-en-8" class="EN">Experience</h2>
            </div>
            <div id="experience-detail-8" class="page-detail">
                <div class="project">
                    <div class="main">
                        <div clas="left"><p>向尚服饰 （PC端）</p></div>
                        <div class="right"><p>2015.5-2015.10</p></div>
                        <div class = "content">
                            <p>项目描述：页面使用CSS+DIV技术布局和模板引擎进行动态的渲染页面。</p>
                            <p>主要负责：</p>
                            <p>用 AngularJS 操作数据，和页面绑定渲染。</p>
                            <p>与设计人员和程序人员的沟通，及设计原型转换、实现。</p>
                            <p>对前台代码进行优化，注重用户体验,提高用户体验度。</p>
                            <p>以及后期的维护和迭代更新。</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
        <!--第九页-->
        <li id="experience9" class="page">
            <div id="experience-title-9" class="page-title">
                <h2 id="experience-title-cn-9" class="CN">项目经验</h2>
                <h2 id="experience-title-en-9" class="EN">Experience</h2>
            </div>
            <div id="experience-detail-9" class="page-detail">
                <div class="project">
                    <div class="main">
                        <div clas="left"><p>魏桥商城 （pc端）</p></div>
                        <div class="right"><p>2014.08-2015.02</p></div>
                        <div class = "content">
                            <p>项目描述：页面整体使用CSS+DIV技术布局和使用JS与jQuery实现特效和优化及代码维护。</p>
                            <p>主要负责：</p>
                            <p>负责将设计稿制作成符合HTML/HTML5的HTML代码 。</p>
                            <p>使用Ajax实现前后端的数据交互。</p>
                            <p>负责特卖产品、商品推荐模块，用JS实现Tab栏切换和利用CSS3新属性实现高亮显示。</p>
                            <p>页面布局以及代码优化,解决浏览器兼容问题。</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>



    </ul>
</div>

<script type="text/javascript" src="js/mresume.js"></script>

<script type="text/javascript">
    var btn = document.getElementById("btn");
    var info = document.getElementById("info");
    btn.onclick = function () {
        info.style.display="none"
    }
</script>

</body>
</html>